<template>
	<view class="index-wrap">
			<view class="notice-con" @click="onSeleDate">
				<view class="c-flex jc-between c-item-center">
					<view class="c-flex c-item-center">
						<text class="label-1">选择查询年度</text>
					</view>
					<view class="year-val c-flex c-item-center">{{year}}年
						<image class="arrow-right" src="@/static/images/index/right-icon.png"></image>
					</view>

				</view>
			</view>
		<view class="total-info c-flex jc-between">
			<view class="left c-flex c-flex-col">
				
				<circleChart class="circleChart" :rate="lineChartRate" :config="activeTenantCouConfig">
					<view class="countUser">{{total}}</view>
					<view>总用户</view>
				</circleChart>
				<text v-if="checkPassRate !='NaN'">安检合格率：{{checkPassRate}}%</text>
				<text v-else>安检合格率：--</text>
			</view>
			<view class="right c-flex c-flex-col c-item-center">
				<view  class="item c-flex jc-around " v-for="(item,index) in totalStatistArr" :key="index">
					<view class="i-left c-flex c-item-center">
						<image :src="gasImgUrl+item.url"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="i-right  c-flex c-item-center">
						<text>{{item.value}}</text>
						<text>{{item.unit}}</text>
					</view>
				</view>
				
			</view>
		</view>
			<view class="company-content " v-for="item in list" >
				<view class="project-info">
					<!-- 统计 -->
					<view class="top c-flex jc-between c-item-center" :class="item.type===0?'type_0':item.type===1?'type_1':'type_2'">
						<view class="title c-flex c-item-center">
							
							<text>{{item.type===0?'民用安检情况':item.type===1?'商业安检情况':'工业安检情况'}}</text>
						</view>
						
					</view>
					<!-- <view class="line"></view> -->
					<view class="statist-con c-flex c-flex-row jc-around c-item-center">
						<template v-for="(desc,index) in statistArr">
							<view class="item c-flex c-flex-col jc-center" :key="index">
								<view class="value">
									<text  v-if='index==0'>{{item.totalCount}}<text class="unit">户</text></text>
									<text  v-if='index==1'>{{item.todoCount}}<text class="unit">户</text></text>
									<text  v-if='index==2'>{{item.passCount}}<text class="unit">户</text></text>
									<text  v-if='index==3'>{{item.failCount}}<text class="unit">户</text></text>
									
								</view>
								<view class="companyName c-flex c-item-center jc-center">
									
									<!-- <text :class="index==statistArr.length-1?'companyUnCheck':'defCheck'">{{desc.name}}</text> -->
									<text class="defCheck">{{desc.name}}</text>
									
								</view>
							</view>
			
						</template>
					</view>
				</view>
			</view>
		<!-- 日期选择 -->
		<tyd-date ref="tydDate" :startYear='2023' :mode="'year'" :current="true" :chooseValue="year" @dateChange="onMonthChange"></tyd-date>

	</view>
</template>

<script>
	import circleChart from './circle-chart.vue';
	import TydDate from '@/components/tyd-date/tyd-date.vue';
	import {
		toast
	} from '@/utils/utils.js'
	export default {
		components: {
			TydDate,circleChart
		},
		data() {
			return {
				gasImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/room/',
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/',
				totalStatistArr: [
					{
						name: '未安检:',
						value: 0,
						unit: '户',
						url: '未安检@2x.png',
						color: '#1ABA69',
					},
					{
						name: '安检合格:',
						value: 0,
						unit: '户',
						url: '安检合格@2x.png',
						tag: '1',
						color: '#F14333',
					},
					{
						name: '安检异常:',
						value: 0,
						unit: '户',
						url: '安检异常@2x.png',
						tag: '1',
						color: '#F14333',
					}
					
				],
				list:[],
				statistArr: [{
						name: '总用户',
						
					},
					{
						name: '待安检',
						
					},
					{
						name: '安检合格',
						
					},
					{
						name: '安检异常',
						
					}
				],
				
				year: '',
				
				lineChartRate:0,
				checkPassRate:0,
				activeTenantCouConfig:{
					width:'210rpx',height:'210rpx',circleColor:'#E86748',startColor:'#E86748',endColor:'#E86748',
					'centerCircleBg': '#ffffff','borderBackground':'#E5E4EB','borderWidth':'15px'
				},
				total:0
			}
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor: '#000000'
			});
			const date = new Date();
			
			this.year = date.getFullYear();
			this.getStatisticByYear();
			
			//this.lineChartRate = (res.activeTenantCounts/res.tenantCounts).toFixed(2);
		},
		
		methods: {
			bindChange(e) {
				console.log('bindChange', e)
			},

			//月份选择
			onMonthChange(e) {
				this.year = `${e.year}`;
				console.log(this.year)
				this.getStatisticByYear();
				
			},
			//打开日期选择器
			onSeleDate(e) {
				this.$refs.tydDate.show();
			},
			getStatisticByYear(){
				
				this.$API.statisticByYear({
				
					year:this.year
				}).then(res => {
					if (res.code === 0) {
						this.totalStatistArr[0].value = res.list[3].todoCount
						this.totalStatistArr[1].value = res.list[3].passCount
						this.totalStatistArr[2].value = res.list[3].failCount
						
						this.total = res.list[3].totalCount;
						this.lineChartRate = (this.totalStatistArr[1].value/this.total).toFixed(2);
						this.checkPassRate = ((this.totalStatistArr[1].value/this.total)*100).toFixed(2);
						
						//console.log(this.checkPassRate)
						this.list = res.list;
						
						this.list.length =3;
					}
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;

	}
</style>
<style lang="scss" scoped>
	.index-wrap {
		background-image: linear-gradient(rgba(249, 195, 115, .3) 0%, #F9F9F9 100%);
		height: 100%;
		position: relative;
			.total-info{
				padding: 26rpx 10rpx 0;
				position: relative;
				margin: 0 24rpx 24rpx;
				
				
				.left{
					width: 332rpx;
					height: 356rpx;
					background: rgba(255,255,255,0.8);
					border-radius: 20rpx;
					border: 2rpx solid #FFFFFF;
					.circleChart{
						margin: 42rpx auto;
						.countUser{
							font-family: DINAlternate, DINAlternate;
							font-weight: bold;
							font-size: 40rpx;
							color: #000000;
						}
					}
					text{
						text-align: center;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
					}
					
				}
				.right{
					width: 332rpx;
					height: 356rpx;
					row-gap: 20rpx;
					.item{
						width: 100%;
						height: 110rpx;
						background: rgba(255,255,255,0.8);
						border-radius: 28rpx;
						border: 2rpx solid #FFFFFF;
						image{
							width: 46rpx;
							height: 46rpx;
						}
						.i-left{
							text{
								margin-left: 10rpx;
							}
						}
						.i-right{
							text:nth-child(1){
								font-family: DINAlternate, DINAlternate;
								font-weight: bold;
								font-size: 40rpx;
								color: #000000;
							}
							text:nth-child(2){
								font-family: PingFang-SC, PingFang-SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #000000;
							}
						}
						
						
					}
				}
			}
		
			.notice-con {
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 26rpx 10rpx;
				position: relative;
				margin: 0 30rpx 24rpx;
				top: 30rpx;

				image:first-child {
					width: 42rpx;
					height: 35rpx;
					margin-right: 5rpx;
				}

				.label-1 {
					display: inline-block;
					//background: rgba(254, 159, 34, 0.1);
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #8B959F;
					margin-right: 16rpx;
					padding: 8rpx;
					margin-left: 24rpx;
				}

				
				.year-val{
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.arrow-right {
					width: 34rpx;
					height: 34rpx;
				}
			}
		

		.project-info {
			border-radius: 15rpx;
			height: 244rpx;

			.bg {
				position: absolute;
				width: 686rpx;
				height: 244rpx;
			}
			.type_0{
				background: linear-gradient( 90deg, #d3f1e2 0%, #FFFFFF 100%);
			}
			.type_1{
				background: linear-gradient( 90deg, #cee3fd 0%, #FFFFFF 100%);
			}
			.type_2{
				background: linear-gradient( 90deg, #FEECD7 0%, #FFFFFF 100%);
			}
			.top {
				position: relative;
				padding: 22rpx;
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
				.view-info{
					position: absolute;border-radius: 24rpx;
					background:#ffffff;padding:8rpx 16rpx;
					right: 44rpx;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #3476FE;
					image{    width: 28rpx; height: 28rpx; margin-left: 8rpx;}
				}

				.title {
					

					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						font-family: PingFang-SC, PingFang-SC;
	
						padding-left: 14rpx;
						max-width: 360rpx;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
					}

					
				}
			}

			//background: linear-gradient(180deg, #00BBFF 0%, #0085FF 100%);
		}



		.statist-con {
			position: relative;
			margin-top: 30rpx;
			.item {

				text-align: center;
				color: #fff;

				.value {
					text:nth-child(1) {
						font-weight: bold;
						font-size: 40rpx;
						color: #333333;
						.unit{
							font-size: 24rpx;
						}

					}

					text:nth-child(2) {
						font-size: 24rpx;
					}
				}

				.name {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFF;
					padding: 6rpx 16rpx;
					margin-top:8rpx;
				}

				.companyName {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-top:8rpx;
				}

				

				
				.defCheck {
					//background: #FFF;
					padding: 6rpx 16rpx;
					
					border-radius: 22rpx;
				}
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}


		}

		
		.company-content {
			width: 686rpx;
			height: 252rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 20rpx auto 0;
			
			
		}
		


	}
</style>